<template>
  <li  v-if="item.status === status" >
    <label><input type="checkbox" :checked="item.isComplete" @change="onChange($event)"></label>
    <div class="centent-input">
      <h1 :class="[active === 'h1' ? 'active' : '']" @dblclick.prevent="dblclickHandler(item.title)">{{item.title}}</h1>
      <input v-todo-focus :class="[active === 'input' ? 'active' : '']" type="text" v-model="item.title" @keyup.esc="cancel(item)" @keyup.enter="ensure(item.title)" @blur="ensure(item.title)">
    </div>
    <div class="btns" @click="removeTodo(item)"><button>删除</button></div>
  </li>
</template>
<script>
export default {
  name:'TodoItem',
  props:['item','status'],
  data:function () {
    return {
      isAll:true,
      active:'h1',
      title:''
    }
  },
  methods: {
    onChange(e) {
      console.log(e.target.checked)
      this.item.isComplete = e.target.checked;
    },
    removeTodo(item) {
      this.$bus.$emit('removeitem', item)
    },
    dblclickHandler:function (title) {
      this.active = 'input';
      this.title = title;
    },
    ensure:function (title) {
      if(!title) {
        return;
      }else {
        this.active = 'h1';
      }
    },
    cancel:function (item) {
      item.title = this.title;
      this.active = 'h1';
    }
  },
  directives:{
    'todo-focus': function (el, binding) {
        el.focus()
    },
  }
  
}
</script>
<style scoped>
section > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2e2e2e;
  padding: 5px 20px;
  box-sizing: border-box;
}
section > ul > li:hover {
  background-color: #ccc;
}
section > ul > li > label {
  width: 80px;
  flex-shrink: 0;
  
}
section > ul > li > label > input[type=checkbox] {
  width: 25px;
  height: 25px;
}
section > ul > li > div.btns {
  width: 100px;
  text-align: right;
  flex-shrink: 0;
}

section > ul > li > div.centent-input {
  flex: 1;
  flex-shrink: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
section > ul > li > div.centent-input > h1 {
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: none;
  height: 45px;
  line-height: 45px;
}
section > ul > li > div.centent-input > .active {
  display: block;
}
section > ul > li > div.centent-input > input {
  width: 100%;
  box-sizing: border-box;
  height: 45px;
  outline: none;
  padding: 0 15px;
  box-sizing: border-box;
  display: none;
}

section > ul > li > div.btns > button {
  background-color: #409EFF;
  border:1px solid #409EFF;
  padding: 5px 15px;
  cursor: pointer;
  color: #fff;
  transition: background-color .2s linear;
  display: none;
}
section > ul > li:hover > div.btns > button {
  display: inline-block;
}

section > ul > li > div.btns > button:hover {
  background-color: #F56C6C;
  border-color: #F56C6C;
}
</style>
